Fork me on GitHub

第十五章 事件

字数统计: 4.3k字   |   阅读时长≈ 17分

JavaScript 与 HTML 的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻。 可以使用仅在事件发生时执行的监听器（也叫处理程序）订阅事件。在传统软件工程领域，这个模型叫 “观察者模式”，其能够做到页面行为（在 JavaScript 中定义）与页面展示（在 HTML 和 CSS 中定义）的 分离。

事件流

1、事件冒泡
事件定义从最为具体的元素开始触发，然后传播至没那么具体的元素

2、事件捕获
最不具体的元素节点应该最先受到事件，而最具体的元素因该最后收到事件

事件处理程序

  • DOM0

    • 元素.on + 事件名 = 处理函数
    • 元素.on + 事件名 = null

  • DOM2

    • -addEventListener
    • -removeEventListener

  • IE

    • -attachEvent
    • -detachEvent
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 兼容写法
var EventUtil = { 
    addHandler: function(element, type, handler) { 
        if (element.addEventListener) { 
            element.addEventListener(type, handler, false); 
        } else if (element.attachEvent) { 
            element.attachEvent("on" + type, handler); 
        } else { 
            element["on" + type] = handler; } 
    }, 
    removeHandler: function(element, type, handler) { 
        if (element.removeEventListener) { 
            element.removeEventListener(type, handler, false); 
        } else if (element.detachEvent) { 
            element.detachEvent("on" + type, handler); 
        } else { 
            element["on" + type] = null; 
        } 
    },
    getEvent: function(event) { 
        return event ? event : window.event; }
    ,
    getTarget: function(event) { 
        return event.target || event.srcElement; 
    },
	stopPropagation: function(event) { 
        if (event.stopPropagation) { 
            event.stopPropagation(); 
        } else { 
            event.cancelBubble = true; 
        } 
    },
    preventDefault: function(event) { 
        if (event.preventDefault) { 
            event.preventDefault(); 
        } else { 
            event.returnValue = false; 
        } 
    },


};


DOM事件对象

属性 类型 说明
bubbles 布尔值 只读 表示事件是否冒泡
cancelable 布尔值 只读 表示是否可以取消事件的默认行为
currentTarget 元素 只读 当前事件处理程序所在的元素
defaultPrevented 布尔值 只读 true 表示已经调用
preventDefault() 方法 （DOM3 Events 中新增）阻止默认行为
detail 整数 只读 事件相关的其他信息
eventPhase 整数 只读 表示调用事件处理程序的阶段：1 代表捕获阶段，2 代表 到达目标，3 代表冒泡阶段
preventDefault() 函数 只读 用于取消事件的默认行为。只有 cancelable 为 true 才 可以调用这个方法
stopImmediatePropagation() 函数 只读 用于取消所有后续事件捕获或事件冒泡，并阻止调用任 何后续事件处理程序（DOM3 Events 中新增）
stopPropagation() 函数 只读 用于取消所有后续事件捕获或事件冒泡。只有 bubbles 为 true 才可以调用这个方法
target 元素 只读 事件目标
trusted 布尔值 只读 true表示事件是由浏览器生成的。false 表示事件是开 发者通过 JavaScript 创建的（DOM3 Events 中新增）
type 字符串 只读 被触发的事件类型
View AbstractView 只读 与事件相关的抽象视图。等于事件所发生的 window 对象

IE DOM事件对象

​ IE中的 event 对象 储存在window 上

属性 类型 说明
cancelBubble 布尔值 读/写 默认为 false，设置为 true 可以取消冒泡（与 DOM 的 stopPropagation()方法相同）
returnValue 布尔值 读/写 默认为 true，设置为 false 可以取消事件默认行为 （与 DOM 的 preventDefault()方法相同）
srcElement 元素 只读 事件目标（与 DOM 的 target 属性相同） type 字符串 只读 触发的事件类型

事件类型

 用户界面事件（UIEvent）

涉及与 BOM 交互的通用浏览器事件。

load

在 window 上当页面加载完成后触发，在窗套（<frameset>）上当所有窗格（<frame>） 都加载完成后触发，在<img>元素上当图片加载完成后触发，在<object>元素上当相应对象加 载完成后触发。

注意 根据 DOM2 Events，load 事件应该在 document 而非 window 上触发。可是为了 向后兼容，所有浏览器都在 window 上实现了 load 事件。

unload

在 window 上当页面完全卸载后触发，在窗套上当所有窗格都卸载完成后触发，在\ 元素上当相应对象卸载完成后触发。

1
2
3
4
两种形式监听
1、window.addEventlistener('load',()=>{})
2、<body onunload="console.log('Unloaded!')"></body>
因为 unload 事件是在页面卸载完成后触发 的，所以不能使用页面加载后才有的对象。此时要访问 DOM 或修改页面外观都会导致错误。
abort

在<object>元素上当相应对象加载完成前被用户提前终止下载时触发。

error

在 window 上当 JavaScript 报错时触发，在<img>元素上当无法加载指定图片时触发， 在<object>元素上当无法加载相应对象时触发，在窗套上当一个或多个窗格无法完成加载时 触发。

select

在文本框（<input>或 textarea）上当用户选择了一个或多个字符时触发。

resize

在 window 或窗格上当窗口或窗格被缩放时触发。

scroll

当用户滚动包含滚动条的元素时在元素上触发。<body>元素包含已加载页面的滚动条。
混杂模式 检测body，标准模式下,除早期Safari其他浏览器都在html元素上 

1
2
3
4
5
6
7
window.addEventListener("scroll", (event) => { 
    if (document.compatMode == "CSS1Compat") { 
        console.log(document.documentElement.scrollTop); 
    } else { 
        console.log(document.body.scrollTop); 
    } 
});

 焦点事件（FocusEvent）

在元素获得和失去焦点时触发。

  • ​ blur：当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。
    ​

  • focus：当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。

  • focusin：当元素获得焦点时触发。这个事件是 focus 的冒泡版。

  • focusout：当元素失去焦点时触发。这个事件是 blur 的通用版。

    当焦点从页面中的一个元素移到另一个元素上时，会依次发生如下事件。
    (1) focuscout 在失去焦点的元素上触发。
    (2) focusin 在获得焦点的元素上触发。
    (3) blur 在失去焦点的元素上触发。
    (4) focus 在获得焦点的元素上触发。

 鼠标事件（MouseEvent）

使用鼠标在页面上执行某些操作时触发。 

- click：在用户单击鼠标主键（通常是左键）或按键盘回车键时触发。
- dblclick：在用户双击鼠标主键（通常是左键）时触发。

  • mousedown：在用户按下任意鼠标键时触发。这个事件不能通过键盘触发。

  • mouseenter：在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡，也不会在 光标经过后代元素时触发。DOM3 Events 中新增的事件。

  • mouseleave：在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡，也不会在 光标经过后代元素时触发。

  • mousemove：在鼠标光标在元素上移动时反复触发。这个事件不能通过键盘触发。

  • mouseout：在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元 素的外部元素，也可以是原始元素的子元素。这个事件不能通过键盘触发。

  • mouseover：在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不能通过键盘触发。

  • mouseup：在用户释放鼠标键时触发。这个事件不能通过键盘触发。

这 4 个事件永远会按照如下顺序触发：
(1) mousedown
(2) mouseup
(3) click
(4) mousedown
(5) mouseup
(6) click
(7) dblclick

鼠标事件坐标

​ -客户端坐标 相对于浏览器窗口坐标
​ -页面坐标 浏览器中页面坐标，页面没有滚动调时与客户端坐标一致
​ -屏幕坐标 相对于电脑屏幕的坐标

修饰键

​ DOM规定了4个修饰键：shiftKey、ctrlKey、altKey 和 metaKey。通过event.metaKey访问

相关元素

​ relativeTarget:这个属性只有在mouseover(移除相关元素到目标元素)、mouseout(移出目标元素到相关元素)事件发生时才包含。其他事件中为null

鼠标按键

​ DOM 为这个 button 属性定义了 3 个值：
​ 0 表示鼠标主键、
​ 1 表示鼠标中键（通常 也是滚轮键）、
​ 2 表示鼠标副键。
​ 按照惯例，鼠标主键通常是左边的按键，副键通常是右边的按键。

额外信息
   DOM2 Events 规范在 event 对象上提供了 detail 属性，以给出关于事件的更多信息。对鼠标事 件来说，detail 包含一个数值，表示在给定位置上发生了多少次单击。

 滚轮事件（WheelEvent）

使用鼠标滚轮（或类似设备）时触发。

和（在所有现代浏览器中）window。mousewheel 事件的 event 对象包含 鼠标事件的所有标准信息，此外还有一个名为 wheelDelta 的新属性。当鼠标滚轮向前滚动时， wheelDelta 每次都是+120；而当鼠标滚轮向后滚动时，wheelDelta 每次都是–120

 输入事件（InputEvent）

向文档中输入文本时触发。

  •  keydown

    用户按下键盘上某个键时触发，而且持续按住会重复触发。

  •  keypress

    用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会 触发这个事件。DOM3 Events 废弃了 keypress 事件，而推荐 textInput 事件。

  •  keyup

    用户释放键盘上某个键时触发。

  • textInput事件:

      在字符被输入到可编辑区域时触发，只有新字符插入时才会触发。其event对象上提供data属性，包含要插入的字符

  • 键码：keyCode
    字符编码：charCode (只有发生keypress事件时才会被设置值)
    DOM3变化：

      新增 key: 用于代替keyCode. 
      char: 按下字符键时返回与key类似，非字符键为null

 键盘事件（KeyboardEvent）

使用键盘在页面上执行某些操作时触发。

 合成事件（CompositionEvent）

在使用某种 IME（Input Method Editor，输入法编辑器）输入 字符时触发。

用于处理 IME 输入时的复杂出入序列

​

HTML5 事件

1、contextmenu事件

​ 上下文菜单事件

1
2
3
4
5
6
7
8
9
10
11
div.addEventListener("contextmenu", (event) => { 
    event.preventDefault(); 
    let menu = document.getElementById("myMenu"); 
    menu.style.left = event.clientX + "px"; 
    menu.style.top = event.clientY + "px"; 
    menu.style.visibility = "visible"; 
});

document.addEventListener("click", (event) => { 
    document.getElementById("myMenu").style.visibility = "hidden"; 
});
2、beforeunload 事件

​ 用于提供阻止用户离开页面的机会，事件不能被取消
​ 

1
2
3
4
5
window.addEventListener("beforeunload", (event) => { 
    let message = "I'm really going to miss you if you go."; 
    event.returnValue = message; 
    return message; 
});
3、DOMContentLoaded 事件

​ load事件会在页面完全加载后触发，会花费较长时间。而此事件会在DOM树构建完成后立即触发，不需要等待 img,js,css等资源加载完成。此期间 可用于下载资源同时指定事件处理程序，更快完成页面交互。

1
2
3
4
document.addEventListener("DOMContentLoaded", (event) => { 
    console.log("Content loaded"); 
});
// 可以使用 setTimeout(()=>{},0) 代替
4、模拟事件

​ document.createEvent() 接收一个参数
​  “UIEvents”（DOM3 中是”UIEvent”）：通用用户界面事件（鼠标事件和键盘事件都继承自这 个事件）。
​  “MouseEvents”（DOM3 中是”MouseEvent”）：通用鼠标事件。
​  “HTMLEvents”（DOM3 中没有）：通用 HTML 事件（HTML 事件已经分散到了其他事件大类中）。
​ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
eg:模拟单击事件

    initMouseEvent()方法接收 15 个参数，分别对应鼠标事件会暴露的属性。这些参数列举如下。
     type（字符串）：要触发的事件类型，如"click"。 
     bubbles（布尔值）：表示事件是否冒泡。为精确模拟鼠标事件，应该设置为 true。
     cancelable（布尔值）：表示事件是否可以取消。为精确模拟鼠标事件，应该设置为 true。 
     view（AbstractView）：与事件关联的视图。基本上始终是 document.defaultView。 
     detail（整数）：关于事件的额外信息。只被事件处理程序使用，通常为 0。 
     screenX（整数）：事件相对于屏幕的 x 坐标。 
     screenY（整数）：事件相对于屏幕的 y 坐标。 
     clientX（整数）：事件相对于视口的 x 坐标。 
     clientY（整数）：事件相对于视口的 y 坐标。 
     ctrlkey（布尔值）：表示是否按下了 Ctrl 键。默认为 false。 
     altkey（布尔值）：表示是否按下了 Alt 键。默认为 false。 
     shiftkey（布尔值）：表示是否按下了 Shift 键。默认为 false。 
     metakey（布尔值）：表示是否按下了 Meta 键。默认为 false。 
     button（整数）：表示按下了哪个按钮。默认为 0。 
     relatedTarget（对象）：与事件相关的对象。只在模拟 mouseover 和 mouseout 时使用。

    let btn = document.getElementById("myBtn"); 
    // 创建 event 对象 
    let event = document.createEvent("MouseEvents"); 
    // 初始化 event 对象 
    event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    // 触发事件 
    btn.dispatchEvent(event);


模拟键盘事件
initKeyboardEvent()方法。这个方法接收以下参数。
 type（字符串）：要触发的事件类型，如”keydown”。
 bubbles（布尔值）：表示事件是否冒泡。为精确模拟键盘事件，应该设置为 true。
 cancelable（布尔值）：表示事件是否可以取消。为精确模拟键盘事件，应该设置为 true。
 view（AbstractView）：与事件关联的视图。基本上始终是 document.defaultView。
 key（字符串）：按下按键的字符串代码。
 location（整数）：按下按键的位置。0 表示默认键，1 表示左边，2 表示右边，3 表示数字键盘， 4 表示移动设备（虚拟键盘），5 表示游戏手柄。
 modifiers（字符串）：空格分隔的修饰键列表，如”Shift”。
 repeat（整数）：连续按了这个键多少次。

//注意，DOM3 Events 废弃了 keypress 事件，因此只能通过上述方式模拟 keydown 和 keyup 事件：

let textbox = document.getElementById("myTextbox"), event; 
// 按照 DOM3 的方式创建 event 对象 
//因为其他浏览器可能返回非标准的 KeyboardEvent 对象
if (document.implementation.hasFeature("KeyboardEvents", "3.0")) { 
    event = document.createEvent("KeyboardEvent"); 
    // 初始化 event 对象 
    event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0); 
} 
// 触发事件 
textbox.dispatchEvent(event);

模拟其他事件（HTML事件在浏览器中很少使用，因为它们用处有限。）

1
2
3
4

let event = document.createEvent("HTMLEvents"); 
   event.initEvent("focus", true, false); 
   target.dispatchEvent(event);
5、自定义事件

​ createEvent(“CustomEvent”)
​ initCustomEvent()方法，该方法接收以下 4 个参数。
​  type（字符串）：要触发的事件类型，如”myevent”。
​  bubbles（布尔值）：表示事件是否冒泡。
​  cancelable（布尔值）：表示事件是否可以取消。
​  detail（对象）：任意值。作为 event 对象的 detail 属性。
​ 

1
2
3
4
5
6
7
8
9
10
11
12
 let div = document.getElementById("myDiv"), event; 
div.addEventListener("myevent", (event) => { 
    console.log("DIV: " + event.detail); 
}); 
document.addEventListener("myevent", (event) => { 
    console.log("DOCUMENT: " + event.detail); 
}); 
if (document.implementation.hasFeature("CustomEvents", "3.0")) { 
    event = document.createEvent("CustomEvent"); 
    event.initCustomEvent("myevent", true, false, "Hello world!"); 
    div.dispatchEvent(event); 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
eg2:
	
// 派发一个自定义事件，通知UI自己正忙
document.dispatchEvebt(new CustomEvent('busy', {detail: true}));

// 执行网络操作
fetch(url)
	.then(handleNetworkResponse)
	.catch(handleNetworkError)
	.finally(()=> {
    	// 通知UI自己现在已经不忙了
    	document.dispatchEvent(new CustomEvent('busy', {deatil: false}));
})
// 在代码其他地方为 busy 事件注册一个处理程序
document.addEventListener('busy', (e)=>{
    if(e.deatil) {
        showSpianner();
    } else {
        hideSpinner();
    }
})

document.createEvent() 已经被废弃，使用 CustomEvent() 代替。CustomEvent 此接口从父接口 Event 继承方法。

document.createEvent -> document.CustomEvent()

效果等同于 new Event()

Javascript自定义事件new Event()与new CustomEvent()

1.CustomEvent构造函数（事件是由程序创建的，可以有任意自定义功能的事件，此特性在 Web Worker 中可用）

1
new CustomEvent(typeArg,customEventInit);

　　

typeArg:一个表示event名字的字符串
customEventInit：（可选）一个字典类型参数，有如下字段：

  • detail:可选的默认值是 null 的任意类型数据，是一个与 event 相关的值（向事件对象添加更多数据）
  • bubbles:一个布尔值，表示该事件能否冒泡。注意：测试chrome默认为不冒泡。
  • cancelable:一个布尔值，表示该事件是否可以取消。

CustomerEventInit 字典参数同样接受来自于 Event 类构造函数的 eventInit 字典参数bubbles和cancelable

1
2
3
4
5
6
7
8
9
10
// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });
 
// create and dispatch the event
var event = new CustomEvent("cat", {
    detail: {
            hazcheeseburger: true
    }
});
obj.dispatchEvent(event);

　　

2.Event()构造函数

1
new Event(typeArg[, eventInit]);

typeArg：是DOMString 类型，表示所创建事件的名称。
eventInit：（可选）是 EventInit 类型的字典，接受以下字段:

  • “bubbles”，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
  • “cancelable”，可选，Boolean类型，默认值为 false， 表示该事件能否被取消。
  • “composed”，可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。
1
2
3
4
5
6
// create a look event that bubbles up and cannot be canceled
var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);
 
// event can be dispatched from any element, not only the document
myDiv.dispatchEvent(evt);

　　

3.createEvent（被废弃掉了)

1
2
3
4
5
6
7
8
9
10
11
12
// Create the event.(被废弃掉了)
var event = document.createEvent('Event');
 
// Create a click event that bubbles up and
// cannot be canceled
event.initEvent('click', true, false);
 
// Listen for the event.
elem.addEventListener('click', function (e) {
  // e.target matches elem
}, false);
elem.dispatchEvent(event);

扫一扫，分享到微信

收藏文章
表情删除后不可恢复，是否删除
取消
确定
图片正在上传，请稍后...
取消上传
评论内容为空！
还没有评论，快来抢沙发吧！
该评论已关闭!
myblog正在使用畅言云评
去社区看看吧
去热评看看吧

热评话题

关闭
按钮 内容不能为空！
立刻说两句吧！ 查看0条评论